<template>
  <a-card
    style="
      width: 100%;
      height: 100%;
      background: #1e1e20;
      border: 1px solid #1e1e20;
    "
  >
    <template #title><span style="color: #fff">素材</span></template>
    <template #extra
      ><span style="color: #fff"
        >{{ currentResource.video?.length }}/1000</span
      ></template
    >
    <div class="material_con" v-if="currentResource.video?.length > 0">
      <div class="video_con">
        <div
          class="video_item"
          v-for="(item, index) in currentResource.video"
          :key="index"
        >
          <div class="operate_con">
            <div class="bottom_con">
              <DeleteOutlined @click="deleteVideo(index)" class="bottom_icon" />
            </div>
          </div>
          <div class="material_image">
            <div class="video_duration">{{ item.material_duration_text }}</div>
            <cu-icon
              class="material_type_icon"
              type="icon-changjing"
              v-if="item.material_type === 'video'"
            />
            <cu-icon
              class="material_type_icon"
              type="icon-tupian2"
              v-if="item.material_type === 'image'"
            />
            <video
              v-if="item.material_type != 'image'"
              :src="item.material_url"
              alt=""
            ></video>
            <img v-else :src="item.material_url" alt="" />
          </div>
          <!-- <div class="material_name">{{ item.material_name }}</div> -->
        </div>
        <a-button
          @click="handleChooseMaterial"
          type="dashed"
          ghost
          class="video_item video_add"
        >
          <a-space :size="4">
            <PlusOutlined style="font-size: 10px" />
            继续添加
          </a-space>
        </a-button>
      </div>
    </div>
    <div class="material_con_no_data" v-else>
      <cu-icon
        @click="handleChooseMaterial"
        class="icon"
        type="icon-sucaizhongxin"
        style="font-size: 100px; color: #aaa; cursor: pointer"
      />
      <a-button
        @click="handleChooseMaterial"
        type="dashed"
        ghost
        style="margin-top: 20px"
        class="btn-add"
        size="default"
      >
        <template #icon>
          <PlusOutlined />
        </template>
        添加素材
      </a-button>
    </div>
    <chooseMaterial
      :isClip="false"
      :multiple="true"
      material_type="video_image"
      :visible="chooseVisible"
      @close="closeMaterial"
    />
  </a-card>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, watch, computed } from "vue";
import {
  DeleteOutlined,
  FolderOpenOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";
import chooseMaterial from "../bottomSet/components/chooseMaterial.vue";
import store from "../../../../../store";
import { message } from "ant-design-vue";

const INITIAL_MATERIAL_LiST = [
  {
    edit: false,
    name: "场景1",
    video: [],
  },
];
export default defineComponent({
  components: {
    PlusOutlined,
    chooseMaterial,
    DeleteOutlined,
  },
  setup(props, context) {
    const state = reactive({
      chooseVisible: false,
      materialList: [
        {
          edit: false,
          name: "场景1",
          video: [],
        },
      ],
    });

    const currentResource = computed(() => state.materialList?.[0] || {});

    const handleChooseMaterial = () => {
      state.chooseVisible = true;
    };

    const deleteVideo = (index) => {
      currentResource.value.video.splice(index, 1);
      message.success("删除成功！");
    };

    const closeMaterial = (data) => {
      if (currentResource.value.video?.length > 1000) {
        message.warning("素材数量最大不超过1000");
        state.chooseVisible = false;
        return;
      }
      if (data) {
        console.log(data);
        const arr = currentResource.value.video;
        const arrId = currentResource.value.video?.map((i) => i.id);
        let flag_1 = false;
        let flag_2 = false;

        data.map((item) => {
          if (arrId.indexOf(item.id) != -1) {
            flag_1 = true;
          }
          if (arrId.indexOf(item.id) == -1) {
            if (item?.material_type == "image") {
              item.material_duration_text = "00:05";
              item.material_duration = 5000;
            }
            arr.push(item);
          }
        });
        if (flag_1) {
          message.success("部分素材重复添加，已自动剔除！");
        }

        currentResource.value.video = arr;
      }
      state.chooseVisible = false;
    };

    watch(
      () => state.materialList,
      (val) => {
        store.dispatch("SetClipJSONResourceData", val);
      },
      {
        deep: true,
        immediate: true,
      }
    );

    watch(
      () => store.getters.clipJSON.resource_data,
      (val) => {
        if (val?.length === 0) {
          state.materialList = [...INITIAL_MATERIAL_LiST];
          return;
        }
        state.materialList = val;
      },
      {
        deep: true,
        immediate: true,
      }
    );

    return {
      ...toRefs(state),
      handleChooseMaterial,
      closeMaterial,
      deleteVideo,
      currentResource,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ss-card-head) {
  border-bottom: 1px solid #000 !important;
  flex-shrink: 0;
  height: 45px;

  .ss-card-head-title {
    padding: 9px 0;
  }
  .ss-card-extra {
    padding: 9px 0;
  }
}

.material_con {
  width: 100%;
  height: calc(100vh - 170px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .video_con {
    height: 100%;
    width: 100%;
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      width: 5px;
      height: 0px;
    }

    &::-webkit-scrollbar-track {
      width: 5px;
      background-color: transparent;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(193, 193, 193, 0.5);
      background-clip: padding-box;
      min-height: 28px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
    // .video_item:nth-child(1) {
    //   margin-left: 0;
    // }

    .video_item {
      width: 70px;
      height: 70px;
      cursor: pointer;
      flex-shrink: 0;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      margin-top: 10px;
      position: relative;
      margin-left: 12px;

      .operate_con {
        position: absolute;
        display: none;
        left: 0;
        top: 0;
        padding: 20px;
        width: 100%;
        height: 100%;
        z-index: 99;

        .bottom_con {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 20px;
          display: flex;
          justify-content: flex-end;
          align-items: center;

          .bottom_icon {
            margin-right: 5px;

            &:hover {
              color: #2878FF;
            }
          }
        }
      }

      &:hover {
        .operate_con {
          display: block;
        }
      }

      // 图片
      .material_image {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 83px;
        background-color: rgba(0, 0, 0, 0.8);
        position: relative;
        border-radius: 5px;
        border: 1px solid rgba(0, 0, 0, 0.8);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        .material_type_icon {
          position: absolute;
          left: 3px;
          bottom: 3px;
          color: #fff;
          font-size: 12px;
        }

        .video_duration {
          position: absolute;
          right: 3px;
          top: 0px;
          color: #fff;
        }

        video {
          max-height: 100%;
          max-width: 100%;
        }

        img {
          max-height: 100%;
          max-width: 100%;
        }
      }

      .material_name {
        margin-top: 7px;
        font-size: 12px;
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 80%;
        max-width: 140px;
        text-align: center;
      }
    }
    .video_add {
      width: 70px;
      height: 70px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #ffffffd1;
      background: #39383d;
      border-color: #aaa;
      border-radius: 4px;
    }
  }
}

.material_con_no_data {
  width: 100%;
  height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .btn-add {
    width: 175px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #39383d;
    border: 1px #aaa dashed;
    cursor: pointer;
    border-radius: 4px;
  }
}
</style>
